<template>
	<view class="charts-power">
		<uni-card padding="0" spacing="0" margin="6px">
			<uni-list>
				<uni-list-item>
					<template v-slot:body>
						<view class="date_mouth">
							<view class="date_mouth_left" @click="onLeftArrow">
								<text class="iconfont icon-zuojiantou"></text>
							</view>
							<view class="date_mouth_center" ref="dateMouthCenter" @click="selectDate">
								<text>{{dateValue}}</text>
								<text class="iconfont icon-rili"></text>
							</view>
							<view class="date_mouth_right" @click="onRightArrow">
								<text class="iconfont icon-youjiantou1"></text>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view class="top">
							<view class="top_left">
								<qiun-data-charts type="arcbar" :opts="opts" :chartData="chartData" />
							</view>
							<view class="list_item">
								<view class="list-item-top">
									<view class="item_title">未开始项目</view>
									<view class="item_number"><text>{{projectStatusRatio.notStartRatio||'--'}}</text>%
									</view>
								</view>
								<view class="list-item-top">
									<view class="item_title">已完成项目</view>
									<view class="item_number"><text>{{projectStatusRatio.successRatio||'--'}} </text> %
									</view>
								</view>
							</view>
						</view>
					</template>
				</uni-list-item>
				<uni-list-item>
					<template v-slot:body>
						<view class="bottom">
							<view class="item" v-for="project in projectStatus">
								<view class="item_title">{{project.title}}</view>
								<view class="item_number"><text>{{project.value||'--'}}</text></view>
							</view>
						</view>
					</template>
				</uni-list-item>
			</uni-list>
		</uni-card>
		<!-- 弹窗 -->
		<uni-popup ref="popup" background-color="#fff" @change="onPopupChange">
			<!-- 日期滑动选择 -->
			<picker-view ref="picker" v-if="visible" :indicator-style="indicatorStyle" :value="value"
				@change="bindChange" class="picker-view">
				<picker-view-column>
					<view class="date-item" v-for="(item,index) in years" :key="index">{{item}}年</view>
				</picker-view-column>
			</picker-view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		api,
		post
	} from '@/util/api.js'
	export default {
		data() {
			const date = new Date()
			const years = []
			const year = date.getFullYear()
			for (let i = 1990; i <= date.getFullYear(); i++) {
				years.push(i)
			}
			return {
				years,
				year,
				visible: true,
				indicatorStyle: `height: 50px;`,
				value: [9999],
				chartData: {},
				opts: {
					color: ["#1890FF", "#91CB74", "#FAC858", "#EE6666", "#73C0DE", "#3CA272", "#FC8452", "#9A60B4",
						"#ea7ccc"
					],
					padding: undefined,
					title: {
						name: "0%",
						fontSize: 20,
						color: "#000"
					},
					subtitle: {
						name: "",
						fontSize: 12,
						color: "#666666"
					},
					extra: {
						arcbar: {
							type: "circle",
							width: 8,
							backgroundColor: "#E9E9E9",
							startAngle: 1.5,
							endAngle: 0.25,
							gap: 2
						}
					}
				},
				projectStatusRatio: {
					successRatio: "0.0",
					notStartRatio: "0.0",
				},
				projectStatus: [{
						title: "未开始",
						value: "0",
						status: 0,
					},
					{
						title: "执行中",
						value: "0",
						status: 1,
					},
					{
						title: "已完成",
						value: "0",
						status: 2,
					},
					{
						title: "已结算",
						value: "0",
						status: 3,
					},
				],
			};
		},
		mounted() {
			this.getServerData();
		},
		computed: {
			dateValue() {
				return this.year
			}
		},
		methods: {
			//左箭头
			onLeftArrow() {
				if (this.year <= this.years[0]) {
					return
				}
				this.year--
				this.getServerData()
			},
			//右箭头
			onRightArrow() {
				if (this.year >= this.years[this.years.length - 1]) {
					return
				}
				this.year++
				this.getServerData()
			},
			//年月选择器
			bindChange: function(e) {
				const val = e.detail.value
				this.year = this.years[val[0]]
			},
			//弹出选择器
			selectDate() {
				this.$refs.popup.open("bottom")
			},
			//选择器显示隐藏
			onPopupChange(e) {
				if (!e.show) {
					this.getServerData()
				}
			},
			async getServerData() {
				const token = uni.getStorageSync('Token')
				let res = await post(api.ProjectStatus, {
					startTime: `${this.year}-01-01`
				})
				// 拿到已结算的项目数，除以总项目数
				let c = res.data[-1]
				let all = res.data[-2]
				let r = 0
				if (c || all) {
					r = c / all
				}
				this.powerList = res.data
				let data = {
					series: [{
						color: "#0055ff",
						data: r || 0 // 圆环比例=
					}]
				};
				this.opts.title.name = Math.floor(r * 100) + "%" // 中间数值
				this.chartData = JSON.parse(JSON.stringify(data));
				// 求未开始占比、已完成占比
				if (res.data[0]) {
					this.projectStatusRatio.notStartRatio = (res.data[0] / res.data[-2] * 100).toFixed(2)
				} else {
					this.projectStatusRatio.notStartRatio = '0.0'
				}
				if (res.data[2]) {
					this.projectStatusRatio.successRatio = (res.data[2] / res.data[-2] * 100).toFixed(2)
				} else {
					this.projectStatusRatio.successRatio = '0.0'
				}
				this.projectStatus.forEach((item) => {
					item.value = 0
					for (let k in res.data) {
						if (k == item.status) {
							item.value = res.data[k];
						}
					}
				});
			},
		}
	};
</script>

<style scoped lang="scss">
	@import '../../../static/css/ProjectStatus.css';
</style>